import { Button, Table } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useContext, useMemo } from 'react'
import { useNavigate } from 'react-router-dom'
import { useRecoilValue } from 'recoil'
import { TableList } from '../../data'
import styles from './index.module.less'
import IconSvg from '@/components/IconSvg'

import { reviewContext } from '../../_context'
import { dictValues } from '@/store/dicts'

export default () => {
  const navigte = useNavigate()
  const dictValuesList = useRecoilValue(dictValues)
  const { tableList, loading } = useContext(reviewContext)
  // 样式
  const computedColor = (status: string) => {
    switch (status) {
      case '0':
        return {
          backgroundColor: '#FFF5EB',
          color: '#F7B060',
        }
      case '2':
        return {
          backgroundColor: '#FFF1F2',
          color: '#EB5F62',
        }
      case '1':
        return {
          backgroundColor: '#EFFDFA',
          color: '#51BCA5',
        }

      default:
        break
    }
  }

  const columns: ColumnsType<TableList> = useMemo(
    () => [
      // {
      //   title: '序号',
      //   dataIndex: 'id',
      //   align: 'center',
      // },
      {
        title: '申请时间',
        dataIndex: 'applyTime',
        align: 'center',
      },
      {
        title: '医院名称',
        dataIndex: 'hospitalName',
        align: 'center',
      },
      {
        title: '地区',
        dataIndex: 'cityName',
        align: 'center',
      },
      {
        title: '申请修改次数',
        dataIndex: 'updateApplyNum',
        align: 'center',
      },
      {
        title: '修改内容',
        dataIndex: 'updateApplyContent',
        align: 'center',
      },
      {
        title: '状态',
        dataIndex: 'status',
        align: 'center',
        render: (value) => (
          <div className={styles.tag} style={computedColor(value)}>
            {dictValuesList.apply_status.find((item) => item.value === value)?.label}
          </div>
        ),
      },
      {
        title: '操作',
        align: 'center',
        render: (_, recod) => (
          <div className={styles.btns}>
            {recod.status === '0' ? (
              <Button
                type='link'
                onClick={() => navigte('/data-review/review', { state: recod })}
                icon={<IconSvg name='review' />}
              >
                审核
              </Button>
            ) : (
              <Button
                onClick={() => navigte('/data-review/preview', { state: recod })}
                type='link'
                icon={<IconSvg name='look' />}
              >
                查看
              </Button>
            )}
          </div>
        ),
      },
    ],
    [],
  )

  return (
    <Table
      loading={loading}
      style={{ marginTop: '24px' }}
      pagination={false}
      columns={columns}
      dataSource={tableList}
      rowKey={'id'}
    />
  )
}
